---
title: 'Calendar controls plugin'
description: 'Add some additional controls, to programmatically change the calendar view, set the date, or update the calendar configuration.'
---

# Calendar controls

Add some additional controls, to programmatically change the calendar view and set the date.

## Install

```bash copy
npm i @schedule-x/calendar-controls
```

## API

### `setView(viewName: string)`

Change the calendar view.

### `setDate(date: Temporal.PlainDate)`

Set the date of the calendar.

### `setTimezone(timezone: IANATimezone): void`

Set the timezone of the calendar.

### `setFirstDayOfWeek(firstDayOfWeek: WeekDay): void`

Set the first day of the week for the calendar. Value must be between 0 and 6 where 0 is Sunday, 1 is Monday etc.

### `setLocale(locale: string): void`

Set the locale of the calendar.

### `setViews(views: [View, ...View]): void`

Set the available views for the calendar. The views to be set must include the currently active view name. At least one view must be passed into this function.

### `setDayBoundaries(dayBoundaries: DayBoundariesExternal): void`

Set the day boundaries of the calendar.

### `setWeekOptions(weekOptions: WeekOptions): void`

Set the week options of the calendar.

### `setCalendars(calendars: Record<string, CalendarType>): void`

Set the available calendars to be displayed in the calendar.

### `setMinDate(minDate: string|undefined): void`

Set the min date for the calendar navigation.

### `setMaxDate(maxDate: string|undefined): void`

Set the max date for the calendar navigation.

### `setMonthGridOptions(monthGridOptions: MonthGridOptions): void`

Set the month grid options of the calendar.

### `getView(): string`

Get the name of the current view.

### `getDate(): Temporal.PlainDate`

Get the currently selected date of the calendar.

### `getRange(): { start: Temporal.ZonedDateTime, end: Temporal.ZonedDateTime }`

Get the currently visible time range of the calendar.

### `getFirstDayOfWeek(): WeekDay`

Get the currently configured first day of week of the calendar.

### `getLocale(): string`

Get the current locale of the calendar.

### `getViews(): View[]`

Get the currently available views of the calendar.

### `getDayBoundaries(): DayBoundariesExternal`

Get the day boundaries of the calendar.

### `getWeekOptions(): WeekOptions`

Get the week options of the calendar.

### `getCalendars(): Record<string, CalendarType>`

Get the calendars of the calendar.

### `getMinDate(): Temporal.PlainDate|undefined`

Get the current min date for the calendar navigation.

### `getMaxDate(): Temporal.PlainDate|undefined`

Get the current max date for the calendar navigation.

### `getMonthGridOptions(): MonthGridOptions`

Get the current month grid options of the calendar.


## Examples

```js
import { createCalendarControlsPlugin } from '@schedule-x/calendar-controls'

const calendarControls = createCalendarControlsPlugin()

const calendar = createCalendar(
  { /** config */ },
  [calendarControls]
)
calendar.render(/** your calendar element */)

// Programmatically change the calendar view
calendarControls.setView('week')

// Programmatically set the date
calendarControls.setDate(Temporal.PlainDate.from('2025-01-01'))
```
